<template>
  <div>
    <!-- 导航栏部分 -->
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <div class="container">
      <!-- 正文标题 -->
      <h3>{{ article.title }}</h3>
      <!-- 作者信息 -->
      <van-cell center class="author">
        <div slot="title">{{ article.aut_name }}</div>
        <span slot="label">{{ article.pubdate | relativeTime }}</span>
        <van-image
          class="authorImg"
          slot="icon"
          width="35"
          fit="cover"
          round
          height="35"
          :src="article.aut_photo"
        />
        <van-button
          size="small"
          :type="article.is_followed ? 'default' : 'danger'"
          round
          class="aubutton"
          @click="article.is_followed = !article.is_followed"
          :icon="article.is_followed ? '' : 'plus'"
          >{{ article.is_followed ? "已关注" : "关注" }}</van-button
        >
      </van-cell>
      <!-- 正文内容 -->
      <!-- 图片预览需要操作 img dom节点 -->
      <div
        class="markdown-body artCon"
        v-html="article.content"
        ref="artCon"
      ></div>

      <!-- 评论显示区 使用组件 -->
      <ArticleComments :articleId="articleId"></ArticleComments>

      <!-- 底部评论收藏区 -->
      <van-cell class="footer" center>
        <!-- 评论区 -->
        <van-button slot="title" round @click="popShow = !popShow"
          >写评论</van-button
        >
        <!-- 图标区 -->
        <div class="icons">
          <van-icon size="19px" name="chat-o" :badge="total" />
          <van-icon
            size="19px"
            :color="article.is_collected ? 'orange' : '#777'"
            :name="article.is_collected ? 'star' : 'star-o'"
            @click="onCollect"
          ></van-icon>
          <van-icon
            size="19px"
            :color="article.attitude === -1 ? '#777' : 'red'"
            :name="article.attitude === -1 ? 'good-job-o' : 'good-job'"
            @click="article.attitude = article.attitude === -1 ? 1 : -1"
          ></van-icon>
          <van-icon size="19px" name="share-o"></van-icon>
        </div>
      </van-cell>
      <!-- 评论弹出层 -->
      <van-popup v-model="popShow" position="bottom">
        <div class="popCon">
          <van-field
            style="background-color: #eee"
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入评论"
            show-word-limit
            border
          />
          <van-button round size="small" @click="postCom('a')">发布</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import './github-markdown.css'
import { ImagePreview } from 'vant'
import ArticleComments from './ArticleComments'
export default {
  name: 'Article',
  components: { ArticleComments },
  props: {
    articleId: {
      type: [String, Object, Number],
      required: true
    }
  },
  data () {
    return {
      // 文章详情内容
      article: {},
      total: 0,
      popShow: false,
      message: ''// 评论内容
    }
  },
  methods: {
    async getArticle () {
      const { data: res } = await this.$https.get(`/app/v1_0/articles/${this.articleId}`)
      this.article = res.data
      const artcleDoms = this.$refs.artCon
      // 操作 dom 元素后需要等到下一次页面渲染，所以使用 nexttick 方法
      this.$nextTick(() => {
        const imgs = artcleDoms.querySelectorAll('img')
        const imgPaths = []
        imgs.forEach((img, index) => {
          imgPaths.push(img.src)
          // 对所有的图片添加点击事件
          img.onclick = function () {
            // 图片预览配置 图片链接数组 图片开始下标
            ImagePreview({
              images: imgPaths,
              startPosition: index
            })
          }
        })
      })

      // 获取评论总数
      const { data } = await this.$https.get('/app/v1_0/comments', {
        params: {
          type: 'a',
          source: this.articleId,
          offset: null,
          limit: 10
        }
      })
      this.total = data.data.total_count
    },
    onCollect () {
      this.article.is_collected = !this.article.is_collected
      if (this.article.is_collected) {
        this.$toast.success('收藏成功！')
      } else this.$toast.fail('取消收藏！')
    },
    // 发布评论处理
    async postCom (type) {
      const { data: res } = await this.$https.post('/app/v1_0/comments', {
        target: this.articleId.toString(),
        content: this.message,
        // 对评论进行回复才需要这个文章 id
        art_id: type === 'a' ? null : this.articleId.toString()
      })

      // 发布后关闭popup
      this.popShow = false
      // 事件总线
      console.log(res.data.new_obj)
      this.$bus.$emit('addCom', res.data.new_obj)
    }
  },
  created () {
    this.getArticle()
  }
}
</script>

<style scoped lang="less">
.popCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 8px;
  .van-button {
    width: 50px;
    height: 22px;
  }
}
/deep/.van-nav-bar__content {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
}
.container {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 40px;
  overflow-y: auto;
  .van-cell {
    padding: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 40px;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    .van-button {
      width: 120px;
      height: 30px;
      color: #ccc;
    }
    .icons {
      height: 40px;
      width: 100%;
      display: flex;

      align-items: center;
      .van-icon {
        flex: 1;
      }
    }
  }
  .artCon {
    padding-top: 20px;
  }
  background-color: #fff;
  padding: 14px;
  h5 {
    padding: 0;
    margin: 0;
  }
  .author {
    .authorImg {
      margin-right: 5px;
    }
    .aubutton {
      width: 65px;
      height: 29px;
    }
  }
}
</style>
